import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { Bars, Donut, HBars, StackedBars } from '@/components/charts/charts';
import { Block, EventsList, HeroFacts, KpiStrip, PlannedUnavailable, ScrollTable, Tag, entityMetadata } from '@/components/entities/shared';
import { ConstellationsMiniTable, LaunchesTable, OperatorsMiniTable, SatellitesTable } from '@/components/entities/tables';
import { WorldMap } from '@/components/map/world-map';
import { Container } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { ApiError, api, safe } from '@/lib/api';
import { fmtDate, fmtDateTime, fmtInt, num, titleCase } from '@/lib/format';
import { MISSION_LABELS, OBJECT_TYPE_LABELS, ORBIT_CLASS_COLORS, SITE_URL, routes } from '@/lib/site';
import type { CountryDetail } from '@/lib/types';

type Props = { params: Promise<{ slug: string }> };

async function load(slug: string): Promise<{ d: CountryDetail; generatedAt: string } | null> {
  try {
    const res = await api.country(slug);
    return { d: res.data, generatedAt: res.meta.generated_at };
  } catch (e) {
    if (e instanceof ApiError && e.notFound) return null;
    throw e;
  }
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const r = await load(slug).catch(() => null);
  if (!r) return { title: 'Country not found', robots: { index: false } };
  const { d } = r;
  return entityMetadata({
    title: `${d.name} in orbit — ${fmtInt(d.active_payloads)} active satellites, ${fmtInt(d.objects_on_orbit)} objects`,
    description: `${d.name}: ${fmtInt(d.active_payloads)} active payloads, ${fmtInt(d.objects_on_orbit)} objects on orbit including ${fmtInt(d.debris_on_orbit)} debris fragments, ${fmtInt(d.launches)} launches and ${fmtInt(d.operators)} operators. Rankings, orbital and mission distribution, growth, launch sites and recent launches.`,
    path: routes.country(d.slug),
  });
}

function Rank({ n, of }: { n: unknown; of: number | null }) {
  const v = num(n as never);
  if (v === null) return <>—</>;
  return (
    <>
      #{v}
      {of !== null && <span className="text-ink-3"> of {of}</span>}
    </>
  );
}

export default async function CountryPage({ params }: Props) {
  const { slug } = await params;
  const [r, all] = await Promise.all([load(slug), safe(api.countries())]);
  if (!r) notFound();
  const { d, generatedAt } = r;
  const nCountries = all?.data.length ?? null;

  const orbitData = d.orbit_distribution.map((o) => ({ label: o.orbit_class, value: num(o.count) ?? 0, color: ORBIT_CLASS_COLORS[o.orbit_class] ?? 'var(--other)' })).filter((x) => x.value > 0).sort((a, b) => b.value - a.value);
  const missionData = d.mission_distribution.map((m) => ({ label: MISSION_LABELS[m.mission_type] ?? titleCase(m.mission_type), value: num(m.count) ?? 0 })).filter((x) => x.value > 0).sort((a, b) => b.value - a.value);
  const payloadGrowth = d.growth.map((g) => {
    const p = num(g.payloads) ?? 0;
    const still = Math.min(p, num(g.still_active) ?? 0);
    return { x: g.year, still_active: still, retired: Math.max(0, p - still) };
  });
  const launchGrowth = d.growth.map((g) => ({ x: g.year, y: num(g.launches) ?? 0 }));
  const sites = d.launch_sites.filter((s) => s.latitude !== null && s.longitude !== null);
  const objectTypes = [...d.object_type_distribution].sort((a, b) => (num(b.on_orbit) ?? 0) - (num(a.on_orbit) ?? 0));

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Country',
    name: d.name,
    identifier: d.iso3 ?? d.code,
    url: `${SITE_URL}${routes.country(d.slug)}`,
  };

  return (
    <Container wide>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />

      <header className="pb-6 pt-8 md:pb-8 md:pt-12">
        <nav aria-label="Breadcrumb" className="eyebrow">
          <Link href={routes.countries()} className="hover:text-ink">Countries</Link> <span aria-hidden>/</span> {d.name}
        </nav>
        <div className="mt-3 flex flex-wrap items-center gap-2">
          <Tag tone="accent">{d.code}</Tag>
          {d.iso3 && <Tag>{d.iso3}</Tag>}
          {d.region && <Tag>{d.region}</Tag>}
        </div>
        <h1 className="display mt-3 text-3xl md:text-5xl">{d.name}</h1>
        <p className="mt-3 max-w-2xl text-[15px] text-ink-2 md:text-base">
          {fmtInt(d.active_payloads)} active payloads · {fmtInt(d.objects_on_orbit)} objects on orbit · {fmtInt(d.operators)} operators
        </p>
        <HeroFacts
          items={[
            { label: 'Rank · active payloads', value: <span className="tnum font-medium"><Rank n={d.rank_active} of={nCountries} /></span> },
            { label: 'Rank · objects on orbit', value: <span className="tnum font-medium"><Rank n={d.rank_objects} of={nCountries} /></span> },
            { label: 'Rank · debris on orbit', value: <span className="tnum font-medium"><Rank n={d.rank_debris} of={nCountries} /></span> },
          ]}
        />
        {nCountries === null && <p className="mt-2 text-xs text-ink-3">Country total unavailable — ranks shown without denominator.</p>}
      </header>

      <KpiStrip
        items={[
          { label: 'Active payloads', value: <span className="text-active">{fmtInt(d.active_payloads)}</span> },
          { label: 'Payloads on orbit', value: fmtInt(d.on_orbit_payloads) },
          { label: 'Total payloads', value: fmtInt(d.total_payloads) },
          { label: 'Objects on orbit', value: fmtInt(d.objects_on_orbit) },
          { label: 'Debris on orbit', value: <span className="text-warn">{fmtInt(d.debris_on_orbit)}</span> },
          { label: 'Rocket bodies', value: fmtInt(d.rocket_bodies_on_orbit) },
          { label: 'Total objects', value: fmtInt(d.total_objects) },
          { label: 'Launches', value: fmtInt(d.launches) },
          { label: 'Operators', value: fmtInt(d.operators) },
          { label: 'Payloads 365 d', value: fmtInt(d.payloads_last_365d) },
          { label: 'Snapshot', value: <span className="text-base text-ink-2 md:text-lg">{fmtDateTime(generatedAt)}</span> },
        ]}
      />

      <div className="grid gap-x-10 lg:grid-cols-[minmax(0,7fr)_minmax(0,4fr)]">
        <div className="min-w-0">
          <Block eyebrow="Growth" title="Growth by year" id="growth">
            {d.growth.length ? (
              <div className="grid gap-6 lg:grid-cols-2">
                <div>
                  <p className="eyebrow mb-2">Payloads launched · still active vs no longer active</p>
                  <StackedBars data={payloadGrowth} keys={['still_active', 'retired']} labels={{ still_active: 'Still active', retired: 'No longer active' }} title="Payloads by launch year" height={190} />
                </div>
                <div>
                  <p className="eyebrow mb-2">Launches per year</p>
                  <Bars data={launchGrowth} title="Launches per year" height={190} color="var(--series-4)" highlightLast />
                </div>
              </div>
            ) : (
              <Unavailable what="Growth history" />
            )}
          </Block>
          <Block eyebrow="Organisations" title={`Operators · ${fmtInt(d.operators)}`} id="operators" action={{ href: `${routes.operators()}?country=${encodeURIComponent(d.slug)}`, label: 'All operators' }}>
            <OperatorsMiniTable rows={d.operators_list} />
          </Block>
          <Block eyebrow="Programmes" title="Constellations" id="constellations">
            <ConstellationsMiniTable rows={d.constellations_list} />
          </Block>
          <Block eyebrow="Ground" title="Launch sites" id="launch-sites" action={{ href: routes.launchSites(), label: 'All launch sites' }}>
            {d.launch_sites.length === 0 ? (
              <p className="text-sm text-ink-3">No launch site on this country's territory in the catalogue; its payloads fly from foreign sites (see recent launches).</p>
            ) : (
              <div className="space-y-4">
                {sites.length > 0 && <WorldMap title={`Launch sites in ${d.name}`} markers={sites.map((s) => ({ lat: s.latitude!, lon: s.longitude!, label: s.code, href: routes.launchSite(s.slug), size: 4 + Math.min(6, Math.log10((num(s.launches) ?? 1) + 1) * 2) }))} />}
                <ScrollTable>
                  <table className="data-table stack">
                    <thead>
                      <tr>
                        <th>Site</th>
                        <th>Code</th>
                        <th className="num">Launches</th>
                        <th>Last launch</th>
                      </tr>
                    </thead>
                    <tbody>
                      {d.launch_sites.map((s) => (
                        <tr key={s.code}>
                          <td className="primary" data-label="Site"><Link href={routes.launchSite(s.slug)} className="link">{s.name}</Link></td>
                          <td data-label="Code" className="mono text-xs text-ink-2">{s.code}</td>
                          <td data-label="Launches" className="num tnum">{fmtInt(s.launches)}</td>
                          <td data-label="Last launch" className="tnum text-ink-2">{fmtDate(s.last_launch)}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </ScrollTable>
              </div>
            )}
          </Block>
          <Block eyebrow="Fleet" title="Recent satellites" id="satellites" action={{ href: routes.satellites(`country=${encodeURIComponent(d.slug)}`), label: 'All satellites' }}>
            <SatellitesTable rows={d.recent_satellites} columns={['type', 'orbit']} />
          </Block>
          <Block eyebrow="Launches" title="Recent launches" id="launches" action={{ href: routes.launches(`country=${encodeURIComponent(d.slug)}`), label: 'All launches' }}>
            <LaunchesTable rows={d.recent_launches} showPrimary />
          </Block>
          <Block eyebrow="Timeline" title="Events" id="events" action={{ href: routes.events(), label: 'All events' }}>
            <EventsList events={d.events} />
          </Block>
        </div>

        <aside className="min-w-0 lg:border-l lg:border-rule lg:pl-10">
          <Block eyebrow="Payloads on orbit" title={<span className="inline-flex items-center gap-2">Orbital distribution <Link href={routes.methodology()} className="text-[10px] font-semibold uppercase tracking-[0.12em] text-accent-2 hover:underline">derived</Link></span>}>
            <Donut data={orbitData} title="Payloads on orbit by orbit class" size={140} />
          </Block>
          <Block eyebrow="Payloads" title={<span className="inline-flex items-center gap-2">Mission distribution <Link href={routes.methodology()} className="text-[10px] font-semibold uppercase tracking-[0.12em] text-accent-2 hover:underline">derived</Link></span>}>
            <HBars data={missionData} />
          </Block>
          <Block eyebrow="Catalogue" title="Object types">
            {objectTypes.length === 0 ? (
              <Unavailable what="Object type breakdown" compact />
            ) : (
              <ScrollTable>
                <table className="data-table">
                  <thead>
                    <tr>
                      <th>Type</th>
                      <th className="num">On orbit</th>
                      <th className="num">Total</th>
                    </tr>
                  </thead>
                  <tbody>
                    {objectTypes.map((o) => (
                      <tr key={o.object_type}>
                        <td>{OBJECT_TYPE_LABELS[o.object_type] ?? titleCase(o.object_type)}</td>
                        <td className="num tnum font-medium">{fmtInt(o.on_orbit)}</td>
                        <td className="num tnum text-ink-2">{fmtInt(o.total)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </ScrollTable>
            )}
          </Block>
          <Block eyebrow="Attribution" title="Owner codes">
            {d.owner_codes.length === 0 ? (
              <Unavailable what="Owner code mapping" compact />
            ) : (
              <ul className="divide-y divide-rule text-sm">
                {d.owner_codes.map((o) => (
                  <li key={o.code} className="flex items-center justify-between gap-3 py-2">
                    <span className="min-w-0 truncate text-ink-2">{o.name}</span>
                    <span className="flex shrink-0 items-center gap-2">
                      <Tag>{o.kind}</Tag>
                      <code className="mono rounded bg-plane-2 px-1.5 py-0.5 text-xs text-ink">{o.code}</code>
                    </span>
                  </li>
                ))}
              </ul>
            )}
            <p className="mt-3 text-xs text-ink-3">
              SATCAT owner codes mapped to this country. Joint programmes are attributed to the lead country; the mapping is versioned in the <Link href={routes.methodology()} className="text-accent hover:underline">methodology</Link>.
            </p>
          </Block>
          <Block eyebrow="Regulatory" title="Registrations & licenses">
            <PlannedUnavailable what="Registrations & licenses" note="UNOOSA register and national regulatory connectors are planned; entries will carry their source once ingested." />
          </Block>
        </aside>
      </div>
    </Container>
  );
}